<template>
	<el-form ref="form" :model="form" label-width="100px" size="small">
		<el-form-item label="开锁人姓名" prop="name" :rules="[{ required: true, message: '开锁人姓名不能为空'}]">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
        <el-form-item label="手机号码" prop="phone" :rules="[{ required: true, message: '手机号码不能为空'}]">
			<el-input v-model="form.phone"></el-input>
		</el-form-item>
		<el-form-item label="开锁时间">
			<el-date-picker style="width:100%;" size="small" v-model="form.date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
				end-placeholder="结束日期" :clearable="false">
			</el-date-picker>
		</el-form-item>
		<el-form-item label="开锁次数">
            <el-input-number v-model="form.validCount" :min="1"></el-input-number>
		</el-form-item>
		<el-form-item label="开锁说明">
            <el-radio-group v-model="form.type">
                <el-radio v-for="(value, key) of lockExplain" :key="key" :label="key">{{value}}</el-radio>
            </el-radio-group>
		</el-form-item>
		<el-form-item label="备注说明">
			<el-input type="textarea" v-model="form.remark"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit">确定</el-button>
			<el-button @click="cancel">取消</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import { mapState } from 'vuex';
	export default {
		name: 'SendSecurityDialog',
		props: {
			show: Boolean,
            data: Object,
            sender: Object
        },
        computed: {
            ...mapState({
                lockExplain: 'lockExplain',
                userInfo: 'userInfo'
            })
        },
		watch: {
			show: {
				handler(cur) {
					if(cur === false){
						this.form = {
							name: '',
							phone: '',
							date: ['', ''],
							validCount: 1,
							type: '1',
							remark: ''
						}
					}
				}
			}
		},
		data() {
			return {
				form: {
					name: '',
					phone: '',
					date: ['', ''],
					validCount: 1,
					type: '1',
					remark: ''
                },
                errMsg: ''
			}
		},
		methods: {
            validate(){
                if( this.form.name.trim() === "" ) {
                    this.errMsg = '请填写开锁人姓名';
                    return false;
                }
                if( !/^1\d{10}$/.test(this.form.phone) ) {
                    this.errMsg = '请填写正确的手机号码';
                    return false;
                }
                return true;
            },
			onSubmit() {
                if( !this.validate() ) return this.$message({
                    type: 'warning',
                    message: this.errMsg
                });

				this.$obHttp.httpPost(this.$obHttp.Api.sendTempKey, {
					"startTime": this.form.date[0],
					"endTime": this.form.date[1],
					"lockId": this.data.id,
					"name": this.form.name,
					"operator": this.userInfo.userNo,
					"reasonType": this.form.type,
					"remark": this.form.remark,
					"sender": this.sender.userNo,
					"targetPhone": this.form.phone,
					"validCount": this.form.validCount
				}).then(response=>{
					if( response ){
						this.$message({
							message: '请求服务器成功!',
							type: 'success'
						});
						this.$emit('closeSendSecurity');
					}
				});
			},
			cancel(){
				this.$emit('closeSendSecurity');
			}
		}
	}

</script>

<style lang="scss" scoped>
	.line{text-align: center;}
</style>
